<template>
  <div class="app-container" v-loading="loading">
    <div class="flex flex-wrap">
      <div class="flex justify-between w-full p-b-5">
        <div class="font-black text-xl"><!-- 服务到期人数分析 --></div>
        <el-row :gutter="10" class="min-w-12/24 text-right justify-end">
          <el-col :span="8">
            <el-radio-group v-model="expireParams.dateType" @change="getExpire">
              <el-radio-button label="1">本周</el-radio-button>
              <el-radio-button label="2">本月</el-radio-button>
              <el-radio-button label="3">3月内</el-radio-button>
            </el-radio-group></el-col
          >
          <el-col :span="3" class="text-right">
            <el-button icon="Download" @click="exportExcel('服务到期人数分析')"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="min-h-300px w-full">
        <el-table
          ref="expireTable"
          :data="expireData"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column prop="deptId" label="地区">
            <template #default="scope">
              <dict-drop
                :options="bidding_unit"
                :value="scope.row.deptId"
              ></dict-drop>
            </template>
          </el-table-column>
          <el-table-column prop="certificateNum" label="证书" />
          <el-table-column prop="educationPromotionNum" label="学历提升" />
          <el-table-column prop="memberNum" label="会员" />
          <el-table-column prop="totalNum" label="总人数" />
          <!-- <el-table-column label="操作" align="center" v-if="showColu">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:notice:edit']"
              >
                <template #icon>
                  <span class="i-fluent-chevron-circle-right-12-filled"></span>
                </template>
                查看详情
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup name="ExpireTable">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { statisticsExpire } from '@/api/industryStatistics/index'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const {
  bidding_unit //内部单位
} = proxy.useDict('bidding_unit')
const data = reactive({
  expireParams: {
    dateType: '1'
  },
  expireData: []
})
let { expireParams, expireData } = toRefs(data)

const loading = ref(false)
// 服务到期人数
function getExpire() {
  loading.value = true
  statisticsExpire(expireParams.value)
    .then(ref => {
      expireData.value = ref.data
      loading.value = false
    })
    .catch(err => {
      loading.value = false
    })
}
getExpire()

const showColu = ref(true)
// 前端导出excel
const exportExcel = excelName => {
  let tableBox = {
    expireTable: '服务到期人数分析',
    levelTable: '地市统计分析',
    industryTable: '培训业务分类'
  }
  let tableRef = ''
  for (let key in tableBox) {
    console.log('导出key==>', key)
    if (tableBox[key] === excelName) {
      tableRef = key
    }
  }
  showColu.value = false
  setTimeout(() => {
    try {
      const $e = proxy.$refs[tableRef].$el
      let $table = $e.querySelector('.el-table__fixed')
      if (!$table) {
        $table = $e
      }

      const wb = XLSX.utils.table_to_book($table, { raw: true })
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      FileSaver.saveAs(
        new Blob([wbout], { type: 'application/octet-stream' }),
        `${excelName}.xlsx`
      )
      showColu.value = true
    } catch (e) {
      showColu.value = true
      if (typeof console !== 'undefined') console.error(e)
    }
  }, 500)
}
</script>
<style lang="scss" scoped>
.el-radio-group.groupBtn :deep(.el-radio__input) {
  display: none;
}
</style>
